<template>
  <div>
    <h1>watch函数使用</h1>
    <hr />
    <ul>
      <li @click="count++">{{ count }}</li>
      <li @click="obj.name = 'hi react!'">{{ obj }}</li>
    </ul>
  </div>
</template>

<script>
/**
 * **使用步骤**
1. 从vue框架中导入`watch`函数
2. 在setup函数中执行watch函数开启对响应式数据的监听
3. watch函数接收三个常规参数
   1. 第一个参数为函数，返回你要监听变化的响应式数据
   2. 第二个参数为响应式数据变化之后要执行的回调函数
   3. 第三个参数为一个对象，在里面配置是否开启立刻执行或者深度监听
 */
import { ref, watch } from 'vue'
export default {
  // watch: {
  //   data(newValue, oldValue) {

  //   }
  // },
  setup () {
    // 1. 准备响应数据（变量）
    // 简单类型
    const count = ref(0)
    //  注意：ref的变量需要加.value
    watch(() => { return count.value }, (newValue, oldValue) => {
      console.log('count变化了：', newValue, oldValue)
      // 实现功能=》干事
    }, {
      immediate: true
    })

    // 复杂类型
    const obj = ref({ name: '小兰', age: 1 })
    watch(() => obj.value, () => {
      console.log('obj变化了：', obj.value)
    }, {
      // 开启深度监控
      deep: true
    })

    return { count, obj }
  }
}
</script>

<style lang="scss" scoped>
</style>
